<template>
  <!-- <div>优惠券列表</div> -->

  <div class="shop">
    <div class="top">
      <el-button size="small" type="primary" @click="isShowAddCategory = true">新增优惠券</el-button>
      <!-- <el-button size="mini" @click="goStore()">关联商品库</el-button> -->
      <!-- <el-button class="search" size="small" type="primary" @click="searchCategoryData">搜索</el-button> -->

      <!-- <el-input
        class="search input"
        size="small"
        v-model="form.cate_id"
        placeholder="输入id查询"
        clearable
      ></el-input>
      <el-input
        class="search input"
        size="small"
        v-model="form.cate_name"
        placeholder="输入分类名称查询"
        clearable
      ></el-input>-->
    </div>

    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="优惠券ID" prop="id"></el-table-column>
      <el-table-column label="优惠券名称" prop="name"></el-table-column>
      <el-table-column label="券面额" prop="amount"></el-table-column>
      <el-table-column label="发行数/领取数（张）" prop="voucherQuantity">
        <template slot-scope="scope">{{scope.row.voucherQuantity}}/{{scope.row.voucherPerUse}}</template>
      </el-table-column>
      <el-table-column label="最低金额能用" prop="floorAmount">
        <template slot-scope="scope">{{scope.row.floorAmount}}</template>
      </el-table-column>
      <el-table-column label="每人限领数" prop="voucherGrant"></el-table-column>
      <el-table-column label="关联商品数" prop="voucherGrant"></el-table-column>
      <el-table-column label="有效时间" prop="id" width="180">
        \
        <template slot-scope="scope">{{parseTime(scope.row.useStartTime)}} / {{parseTime(scope.row.useEndTime)}}</template>
      </el-table-column>
      <el-table-column label="发券时间" prop="id" width="180">
        <template
          slot-scope="scope"
        >{{parseTime(scope.row.publishStartTime)}} / {{parseTime(scope.row.publishEndTime)}}</template>4
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <!-- <el-switch
            :key="scope.row.id"
            :active-value="0"
            :inactive-value="1"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch> -->
          <span>{{scope.row.status == 1 ?'已启用':'已禁用'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="260">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="goGetUser(scope.row)">领取用户</el-button> -->
          <el-button size="mini" @click="goStore(scope.row)">关联商品库</el-button>
          <el-button size="mini" type="primary" @click="changeShopCate(scope.row)">编辑</el-button>
          <el-button size="mini" @click="deleteShopCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增优惠券" :visible.sync="isShowAddCategory" width="640px">
      <el-form :model="cateForm" :rules="rules" class="demo-ruleForm" label-width="140px">
        <el-form-item label="优惠券名称：">
          <el-input
            v-model="cateForm.name"
            style="width:320px;"
            size="mini"
            placeholder="请输入优惠券名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券面额：">
          <el-input
            v-model="cateForm.amount"
            style="width:320px;"
            size="mini"
            placeholder="请输入优惠券面额"
          ></el-input>
        </el-form-item>
        <el-form-item label="最低可用金额：">
          <el-input
            v-model="cateForm.floorAmount"
            style="width:320px;"
            size="mini"
            placeholder="请输入最低可用金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="发行总数：">
          <el-input
            v-model="cateForm.voucherQuantity"
            style="width:320px;"
            size="mini"
            placeholder="请输入发行总数"
          ></el-input>
        </el-form-item>

        <el-form-item label="每人限领数：">
          <el-input
            v-model="cateForm.voucherGrant"
            style="width:320px;"
            size="mini"
            placeholder="请输入每人限领数"
          ></el-input>
        </el-form-item>
        <el-form-item label="可用商品：">
          <el-input
            v-model="cateForm.productId"
            style="width:320px;"
            size="mini"
            placeholder="不选则表示全平台可用"
          ></el-input>
        </el-form-item>
        <el-form-item label="发券时间：">
          <el-date-picker
            v-model="dateValue"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="有效时间：">
          <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="使用说明：">
          <el-input
            v-model="cateForm.voucherDescription"
            type="textarea"
            style="width:320px;"
            size="mini"
            placeholder="使用说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="status"></el-switch>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size="mini" @click="isShowAddCategory = false">取消</el-button>
        <el-button size="mini" type="primary" @click="certainAddCategory">确定</el-button>
      </div>
    </jdialog>
  </div>
</template>


<script>
import {
  productCouponList,
  productCouponIsEnableUpdate,
  addProductCoupon,
  productCouponIdDelete,
  updateProductCoupon
} from "@/api/store";

export default {
  data() {
    return {
      isShowAddCategory: false,

      form: {
        pageNum: 1,
        pageSize: 20,
        couponType:3
      },

      total: 0,
      // 状态
      status: true,
      tableData: [],
      // 有效时间
      dateValue: [],
      // 发券时间
      timeValue: [],
      cateForm: {
        id:0,
        couponType:3,
        useStartTime: "",
        useEndTime: "",
        publishStartTime: "",
        publishEndTime: "",
        productId:"",
        // 状态
        status: 1,
        //限领数量
        voucherGrant: "",
        // 发行总数
        voucherQuantity: "",
        // 面额
        amount: "",
        // 名称
        name: "",
        // 使用说明
        voucherDescription:'',
        // 最低可用金额
        floorAmount: ""
      },
      rules: {
        voucherGrant: [
          { required: true, message: "请输入限领数量", trigger: "blur" }
        ],
        voucherQuantity: [
          { required: true, message: "请输入发行总数", trigger: "blur" }
        ],
        price: [{ required: true, message: "请输入面额", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getproductCouponListData();
  },
  methods: {
    changeShopCate(row){
      this.cateForm = row

      this.dateValue.push(this.parseTime(row.publishStartTime))
      this.dateValue.push(this.parseTime(row.publishEndTime))
      this.timeValue.push(this.parseTime(row.useStartTime))
      this.timeValue.push(this.parseTime(row.useEndTime))





      this.isShowAddCategory = true
    },
    //搜索数据
    searchCategoryData() {
      this.getproductCouponListData();
    },
    pageChange(page) {
      this.form.pageNum = page;
      //获取更多数据
      this.getproductCouponListData();
    },
    //更改商品分类状态
    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      this.getproductCouponIsEnableUpdateData(id, e);
    },

    //删除商品分类
    deleteShopCate(id) {
      this.$confirm("确认删除该优惠券？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.getproductCouponIdDeleteData(id);
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    //确定新增优惠券
    certainAddCategory() {
      this.getproductCateCreateData();
    },

    //获取优惠券列表数据
    async getproductCouponListData() {
      // var url = "page=" + this.form.page;
      let res = await productCouponList(this.form);
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    //更新商品分类可用状态
    async getproductCouponIsEnableUpdateData(id, status) {
      let res = await productCouponIsEnableUpdate({
        id: id,
        status: status
      });
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getproductCouponListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //新增优惠券
    async getproductCateCreateData() {


      console.log(this.cateForm, this.dateValue, this.timeValue);
      this.cateForm.useStartTime = this.timeValue[0];
      this.cateForm.useEndTime = this.timeValue[1];
      this.cateForm.publishStartTime = this.dateValue[0];
      this.cateForm.publishEndTime = this.dateValue[1];
      // this.cateForm.status = this.status;
      if (this.cateForm.useStartTime > this.cateForm.useEndTime) {
        this.$message.error("发券结束时间和有效结束时间不符合");
        return false;
      }
      if(this.cateForm.id){
        let res = await updateProductCoupon(this.cateForm);
        if (res.code === 200) {
        this.cateForm = {};
        this.$message.success(res.message);
        this.getproductCouponListData();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
      }else{
        let res = await addProductCoupon(this.cateForm);
        if (res.code === 200) {
        this.cateForm = {};
        this.$message.success(res.message);
        this.getproductCouponListData();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
      }
      

    },

    //删除优惠券
    async getproductCouponIdDeleteData(id) {
      let res = await productCouponIdDelete(id);
      if (res.code === 200) {
        this.$message.success(res.message);
        this.getproductCouponListData();
      } else {
        this.$message.error(res.message);
      }
    },
    // 跳转领取用户
    goGetUser(row) {
      let data = JSON.stringify(row);
      this.$router.push({
        path: "./getUserList",
        query: { datalist: data }
      });
    },
    // 跳转关联商品库
    goStore(row) {
      let data = JSON.stringify(row);
      this.$router.push({
        path: "./goods/relevanceShoplist",
        query: { datalist: row.id }
      });
    },

    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .top {
    margin-bottom: 20px;

    .search {
      float: right;
      margin-left: 12px;
    }

    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }

  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }

  .demo-ruleForm {
    padding: 20px;
  }

  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }

  .align {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
